<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ConstructCo - 粗野主义企业设计</title>
    <style>
        /* 基础重置与粗野主义风格 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }

        body {
            background-color: #0a0a0a;
            color: #e0e0e0;
            line-height: 1.6;
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
            border: 6px solid #ff5500;
        }

        /* 粗野主义标题样式 */
        h1,
        h2,
        h3,
        h4 {
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -1px;
            margin-bottom: 20px;
        }

        h1 {
            font-size: 4rem;
            color: #ff5500;
            text-shadow: 4px 4px 0 #000;
        }

        h2 {
            font-size: 2.5rem;
            border-left: 12px solid #ff5500;
            padding-left: 15px;
        }

        /* 导航样式 */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 4px solid #ff5500;
            margin-bottom: 40px;
        }

        .logo {
            font-size: 2rem;
            font-weight: 900;
            color: #ff5500;
        }

        .nav-links {
            display: flex;
            list-style: none;
        }

        .nav-links li {
            margin-left: 30px;
        }

        .nav-links a {
            color: #e0e0e0;
            text-decoration: none;
            font-weight: bold;
            padding: 10px;
            border: 2px solid transparent;
        }

        .nav-links a:hover {
            border: 2px solid #ff5500;
            background-color: #1a1a1a;
        }

        /* 主内容区域 */
        .hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 60px;
        }

        .hero-text {
            padding: 20px;
        }

        .hero-image {
            background-color: #333;
            padding: 40px;
            border: 4px solid #ff5500;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 300px;
            font-size: 1.5rem;
            color: #888;
        }

        /* 服务部分 */
        .services {
            margin-bottom: 60px;
        }

        .service-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .service-card {
            background-color: #1a1a1a;
            padding: 30px;
            border: 3px solid #333;
        }

        .service-card h3 {
            color: #ff5500;
            margin-bottom: 15px;
        }

        /* 关于我们部分 */
        .about {
            background-color: #1a1a1a;
            padding: 40px;
            border: 4px solid #ff5500;
            margin-bottom: 60px;
        }

        /* 联系表单 */
        .contact {
            margin-bottom: 60px;
        }

        .contact-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            background-color: #1a1a1a;
            border: 2px solid #333;
            color: #e0e0e0;
        }

        .form-group textarea {
            grid-column: span 2;
            height: 150px;
        }

        button {
            background-color: #ff5500;
            color: #000;
            border: none;
            padding: 15px 30px;
            font-weight: bold;
            cursor: pointer;
            font-size: 1.2rem;
            border: 2px solid #000;
        }

        button:hover {
            background-color: #ff7733;
        }

        /* 页脚 */
        footer {
            text-align: center;
            padding: 30px;
            border-top: 4px solid #ff5500;
            margin-top: 40px;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {

            .hero,
            .service-grid,
            .contact-form {
                grid-template-columns: 1fr;
            }

            .nav-links {
                flex-wrap: wrap;
            }

            h1 {
                font-size: 3rem;
            }
        }
    </style>
</head>

<body>
    <nav>
        <div class="logo">CONSTRUCTCO</div>
        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">项目</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>

    <section class="hero">
        <div class="hero-text">
            <h1>粗犷设计 坚固未来</h1>
            <p>我们是一家专注于粗野主义建筑与设计的企业，致力于创造大胆、实用且具有冲击力的空间解决方案。我们的设计哲学是形式追随功能，但绝不妥协于美学冲击力。</p>
            <br>
            <button>探索我们的项目</button>
        </div>
        <div class="hero-image">
            [建筑结构图像]
        </div>
    </section>

    <section class="services">
        <h2>我们的服务</h2>
        <div class="service-grid">
            <div class="service-card">
                <h3>建筑设计</h3>
                <p>大胆的几何形状、原始混凝土表面和功能性优先的设计方法，创造令人难忘的建筑体验。</p>
            </div>
            <div class="service-card">
                <h3>室内设计</h3>
                <p>将粗野主义美学引入室内空间，创造既实用又具有视觉冲击力的生活环境。</p>
            </div>
            <div class="service-card">
                <h3>城市规划</h3>
                <p>以人为中心，采用粗野主义原则设计实用、耐用且具有社会意识的城市空间。</p>
            </div>
        </div>
    </section>

    <section class="about">
        <h2>关于我们</h2>
        <p>ConstructCo成立于2005年，由一群坚信"诚实建筑"理念的建筑师创立。我们拒绝装饰主义，拥抱材料的原始本质和结构的真实表达。</p>
        <br>
        <p>我们的项目遍布全球，从住宅建筑到大型公共设施，始终如一地坚持粗野主义的设计原则，同时融入现代可持续性实践。</p>
    </section>

    <section class="contact">
        <h2>联系我们</h2>
        <form class="contact-form">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" required>
            </div>
            <div class="form-group">
                <label for="email">电子邮件</label>
                <input type="email" id="email" required>
            </div>
            <div class="form-group" style="grid-column: span 2;">
                <label for="message">消息</label>
                <textarea id="message" required></textarea>
            </div>
            <button type="submit" style="grid-column: span 2;">发送消息</button>
        </form>
    </section>

    <footer>
        <p>© 2023 ConstructCo 企业 | 粗野主义设计与建筑</p>
        <p>地址：混凝土大道123号，工业城市 | 电话：+86 123 4567 8901</p>
    </footer>
</body>

</html>